<template>
  <div class="wrapper">

    <!-- header -->
    <!-- 用公共组件代替，减少冗余代码 -->
    <Header name="商家列表" />

    <!--商家列表-->
    <ul class="business">
      <li v-for="item in businessArr" @click="toBusinessInfo(item.businessId)">
        <div class="left">
          <img :src="item.businessImg">
          <div class="quantity" v-show="item.quantity > 0">{{ item.quantity }}</div>
        </div>
        <div class="right">
          <h3>{{ item.businessName }}</h3>
          <p>&#165;{{ item.starPrice }}起送 | &#165;{{ item.deliveryPrice }}配送</p>
          <p>{{ item.businessExplain }}</p>
        </div>
      </li>
    </ul>
    <GoTopButton></GoTopButton>
    <!--底部菜单部分-->
    <Footer></Footer>
  </div>
</template>

<script>
import Header from '../components/Header.vue';
import Footer from "../components/Footer.vue";
import GoTopButton from '../components/GoTopButton.vue'

export default {
  name: 'BusinessList',
  data() {
    return {
      orderTypeId: this.$route.query.orderTypeId,
      businessArr: [],
      user: {}
    }
  },

  components: {
    Header,
    Footer,
    GoTopButton,
  },

  created() {
    this.user = this.$getSessionStorage('user');

    //根据orderTypeId查询商家信息
    let url = `BusinessController/listBusinessByOrderTypeId/${this.orderTypeId}`;
    this.$axios.get(url).then(response => {
      this.businessArr = response.data.result;
      //判断是否登录
      if (this.user != null) {
        this.listCart();
      }
    }).catch(error => {
      console.error(error);
    });
  },

  methods: {
    goBack() {
      this.$router.go(-1);
    },
    listCart() {
      let url = `CartController/listCart/${this.user.userId}`;
      this.$axios.get(url).then(response => {
        let cartArr = response.data.result;
        //遍历所有食品列表
        for (let businessItem of this.businessArr) {
          businessItem.quantity = 0;
          for (let cartItem of cartArr) {
            if (cartItem.businessId == businessItem.businessId) {
              businessItem.quantity += cartItem.quantity;
            }
          }
        }
        this.businessArr.sort();
      }).catch(error => {
        console.error(error);
      });
    },
    toBusinessInfo(businessId) {
      this.$router.push({ path: '/businessInfo', query: { businessId: businessId } });
    }
  }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
  width: 100%;
}


/**************************商家列表**************************/
.wrapper .business {
  width: 96%;
  margin-left: 2%;
  margin-top: 14%;
}

.wrapper .business li {
  width: 100%;
  margin-top: 1.9vw;
  box-sizing: border-box;
  border: solid 2px rgb(229, 233, 239);
  border-radius: 15px;
  padding: 2.5vw;
  user-select: none;

  display: flex;
  align-items: center;
}

.wrapper .business li:nth-last-child(1) {
  /* 防止多出空白页面 */
  /* margin-bottom: 100px; */
}

.wrapper .business .left {
  position: relative
}

.wrapper .business .left img {
  width: 20vw;
  height: 20vw;
}

.wrapper .business .left .quantity {
  width: 5vw;
  height: 5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;
  border-radius: 2.5vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}

.wrapper .business .right {
  margin-left: 3vw;
}

.wrapper .business h3 {
  font-size: 3.8vw;
  color: #555;
}

.wrapper .business p {
  font-size: 3vw;
  color: #888;
  margin-top: 2vw;
}
</style>